﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>images slide</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none;
        }

        img {
            width: 100%;
            border: 0;
        }

        a {
            text-decoration: none;
        }

        body {
            margin: 0 auto;
            padding: 0;
        }

        #slide {
            width: 1080px;
            height: 1920px;
            box-shadow: 0px 0px 5px #c1c1c1;
            position: relative;
            overflow: hidden;
            
        }

            #slide ul {
                position: absolute;
                left: 0px;
                top: 0px;
            }

                #slide ul li {
                    width: 1080px;
                    height: 1920px;
                    overflow: hidden;
                    float: left;
                }

            #slide .ico {
                width: 800px;
                height: 20px;
                overflow: hidden;
                text-align: center;
                position: absolute;
                left: 0px;
                bottom: 10px;
                z-index: 1;
            }

                #slide .ico a {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    margin: 0px 5px;
                }

        #btnLeft {
            width: 60px;
            height: 400px;
            left: 0px;
            top: 0px;
            background: url() no-repeat 0px 0px;
            position: absolute;
            z-index: 2;
        }

            #btnLeft :hover {
                background: url() no-repeat 0px 0px;
            }

        #btnRight {
            width: 60px;
            height: 400px;
            right: 0px;
            top: 0px;
            background: url() no-repeat 0px 0px;
            position: absolute;
            z-index: 2;
        }

            #btnRight :hover {
                background: url() no-repeat 0px 0px;
            }

        .jumbotron {
            text-align:center;
            height: 100%;
        }

            .jumbotron h1 {
                font-size: 6em;
            }

            .jumbotron p {
                font-size: 5em;
            }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var oIco = document.getElementById("ico");
            var aBtn = oIco.getElementsByTagName("a");
            var oSlide = document.getElementById("slide");
            var oUl = oSlide.getElementsByTagName("ul");
            var aLi = oUl[0].getElementsByTagName("li");
            var oBtnLeft = document.getElementById("btnLeft");
            var oBtnRight = document.getElementById("btnRight");



            var baseWidth = aLi[0].offsetWidth;
            //alert(baseWidth);
            oUl[0].style.width = baseWidth * aLi.length + "px";
            var iNow = 0;
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].index = i;
                aBtn[i].onclick = function () {
                    //alert(this.index);
                    //alert(oUl[0].style.left);
                    move(this.index);
                    //aIco[this.index].className = "active";
                }
            }
            oBtnLeft.onclick = function () {
                iNow++;
                //document.title = iNow;
                move(iNow);
            }
            oBtnRight.onclick = function () {
                iNow--;
                document.title = iNow;
                move(iNow);
            }

            var curIndex = 0;
            var timeInterval = 1000;
            setInterval(change, timeInterval);
            function change() {
                if (curIndex == aBtn.length) {
                    curIndex = 0;
                } else {
                    move(curIndex);
                    curIndex += 1;
                }
            }
            function move(index) {
                //document.title = index;
                if (index > aLi.length - 1) {
                    index = 0;
                    iNow = index;
                }
                if (index < 0) {
                    index = aLi.length - 1;
                    iNow = index;
                }
                for (var n = 0; n < aBtn.length; n++) {
                    aBtn[n].className = "";
                }
                aBtn[index].className = "active";
                oUl[0].style.left = -index * baseWidth + "px";
                //buffer(oUl[0],{
                // left: -index * baseWidth
                // },8)

            }
        }
    </script>
</head>
<body>
    <div>
        <div id="slide">
            <a id="btnLeft" href="javascript:void(0);"></a>
            <a id="btnRight" href="javascript:void(0);"></a>
            <!--when change next image:style="left: -(n-1)*800px;"-->
            <ul>
                <li>
                    <img src="imgs/1.jpg" alt="" />
                    <div class="jumbotron">
                        <h1>Hello,Workd!</h1>
                        <p>
                            ddfkasjdfklaskldfjlksadlfkjaksdjflkaslkdfjlkasjdflkjasldkfjlksajdf
                        </p>
                    </div>
                </li>
                <li>
                    <img src="imgs/2.jpg" alt="" />
                    <div class="jumbotron">
                        <h1>22222</h1>
                        <p>
                            ddfkasjdfklaskldfjlksadlfkjaksdjflkaslkdfjlkasjdflkjasldkfjlksajdf
                        </p>
                    </div>
                </li>
                <li>
                    <img src="imgs/3.jpg" alt="" />
                    <div class="jumbotron">
                        <h1>Hello,3333!</h1>
                        <p>
                            ddfkasjdfklaskldfjlksadlfkjaksdjflkaslkdfjlkasjdflkjasldkfjlksajdf
                        </p>
                    </div>
                </li>
                <li>
                    <img src="imgs/4.jpg" alt="" />
                    <div class="jumbotron">
                        <h1>Hello,4444!</h1>
                        <p>
                            ddfkasjdfklaskldfjlksadlfkjaksdjflkaslkdfjlkasjdflkjasldkfjlksajdf
                        </p>
                    </div>
                </li>
                <li>
                    <img src="imgs/5.jpg" alt="" />
                    <div class="jumbotron">
                        <h1>Hello,44555!</h1>
                        <p>
                            ddfkasjdfklaskldfjlksadlfkjaksdjflkaslkdfjlkasjdflkjasldkfjlksajdf
                        </p>
                    </div>
                </li>
                <li>
                    <img src="imgs/6.jpg" alt="" />
                    <div class="jumbotron">
                        <h1>Hello,66666!</h1>
                        <p>
                            ddfkasjdfklaskldfjlksadlfkjaksdjflkaslkdfjlkasjdflkjasldkfjlksajdf
                        </p>
                    </div>
                </li>
            </ul>

            <div id="ico" class="ico">
                <a class="active" href="javascript:void(0);"></a>
                <a href="javascript:void(0);"></a>
                <a href="javascript:void(0);"></a>
                <a href="javascript:void(0);"></a>
                <a href="javascript:void(0);"></a>
                <a href="javascript:void(0);"></a>
            </div>
        </div>
    </div>
</body>
</html>